<!-- 运费模板添加&修改 -->
<template>
  <el-dialog
    :visible.sync="showDialog"
    title="新增模板"
    width="50%"
    @close="closeDialog"
  >
    <el-form
      ref="frightRef"
      label-width="120px"
      :model="rowData"
      :rules="freightRules"
    >
      <!-- 模板类型 -->
      <el-form-item
        prop="templateType"
        label="模板类型"
      >
        <el-select
          v-model="rowData.templateType"
          placeholder="请选择模板类型"
          @change="onSelect"
        >
          <el-option
            v-for="item in templateTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 运送类型 -->
      <el-form-item
        prop="transportType"
        label="运送类型"
      >
        <el-select
          v-model="rowData.transportType"
          placeholder="请选择运送类型"
          @change="onSelect1"
        >
          <el-option
            v-for="item in transportTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 关联城市 -->
      <!-- 放弃验证 -->
      <el-form-item
        label="关联城市"
        required
      >
        <el-checkbox-group
          v-model="rowData.associatedCityList"
          @change="onCheckBox"
       
        >
          <el-checkbox
            v-if="show"
            label="全国"
          ></el-checkbox>

          <el-checkbox
            v-if="!show"
            label="京津冀"
          ></el-checkbox>
          <el-checkbox
            v-if="!show"
            label="江浙沪"
          ></el-checkbox>
          <el-checkbox
            v-if="!show"
            label="川渝"
          ></el-checkbox>
          <el-checkbox
            v-if="!show"
            label="黑吉辽"
          ></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- 首重价格 -->
      <el-form-item
        label="首重价格"
        prop="firstWeight"
      >
        <el-input
          v-model="rowData.firstWeight"
          placeholder="请输入首重价格"
          autocomplete="off"
        >
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <!-- 续重价格 -->
      <el-form-item
        label="续重价格"
        prop="continuousWeight"
      >
        <el-input
          v-model="rowData.continuousWeight"
          placeholder="请输入续重价格"
        >
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <!-- 请输入轻抛系数 -->
      <el-form-item
        label="轻抛系数"
        prop="lightThrowingCoefficient"
      >
        <el-input
          v-model="rowData.lightThrowingCoefficient"
          placeholder="请输入轻抛系数"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 按钮 -->
    <!-- 样式需要调整 -->
    <template #footer>
      <el-row
        type="flex"
        justify="center"
         width="150%"
      >
        <el-button
          type="primary"
          @click="submit"
        >确定
        </el-button>
        <el-button
          type="info"
          @click="closeDialog"
        >取消
        </el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
<script>
import { freightManageOperate } from '@/api/transit'

export default {
  name: 'FreightDialog',
  // 接收数据
  props: {
    toggleDialog: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object
    },
    text: {
      type: String
    }
  },
  data() {
    return {
      // // 多选框默认选中
      // checked: true,
      show: true,
      showDialog: false,
    
      freightFrom: {
        // 模板类型
        templateType: null,
        // 运送类型
        transportType: null,
        // 关联城市
        associatedCityList: [],
        // 首重价格
        firstWeight: '',
        // 续重价格
        continuousWeight: '',
        // 轻抛系数
        lightThrowingCoefficient: ''
        // // 计费
        // 'computeWeight': '',
        // // 创建时间
        // 'created': '',
        // // 运费
        // 'expense': '',
        // // 运费模板id
        // 'id': '',
        // // 更新时间
        // 'updated': ''
      },
      freightRules: {
        // 模板类型
        templateType: [{ required: true, message: '模板类型不能为空', trigger: 'change' }],
        // 运送类型
        transportType: [{ required: true, message: '运送类型不能为空', trigger: 'change' }],
        // 城市
        associatedCityList: [
          {
            // type: 'array',
            required: true,
            message: '请至少选择一个城市',
            trigger: 'change'
          }
        ],
        // 首重价格
        firstWeight: [{ required: true, message: '首重价格不能为空', trigger: 'blur' }],
        // 续重价格
        continuousWeight: [{ required: true, message: '续重价格不能为空', trigger: 'blur' }],
        // 轻抛系数
        lightThrowingCoefficient: [
          { required: true, message: '轻抛系数不能为空', trigger: 'blur' }
        ]
      },
      templateTypeOptions: [
        {
          value: '1',
          label: '同城寄'
        },
        {
          value: '2',
          label: '省内寄'
        },
        {
          value: '3',
          label: '经济区互寄'
        },
        {
          value: '4',
          label: '跨省'
        }
      ],
      transportTypeOptions: [
        {
          label: '普快',
          value: '1'
        },
        {
          label: '特快',
          value: '2'
        }
      ],
      value: '',
      oldData: null
    }
  },
  computed: {
    
    rowData: {
      get() {
        if (this.row !== null && this.row !== undefined) {
          return this.row
        } else {
          return this.freightFrom
        }
      },
      set(value) {
        console.log('value',value);
        return value
      }
    }
  },
  watch: {
    'row.associatedCityList'(newValue, oldValue) {
      newValue.forEach(item => {
        if (item === '全国') {
          this.show = true
        } else {
          this.show = false
        }
      })
    },
    toggleDialog(newValue, oldValue) {
      this.showDialog = newValue
    },
    freightData(newValue, oldValue) {
      this.freightFrom = newValue
    },
    
    text(newValue, oldValue) {
      if (newValue === 'add') {
        this.freightFrom = {
          // 模板类型
          templateType: '',
          // 运送类型
          transportType: '',
          // 关联城市
          associatedCityList: [],
          // 首重价格
          firstWeight: '',
          // 续重价格
          continuousWeight: '',
          // 轻抛系数
          lightThrowingCoefficient: ''
        }
      }
    }
  },
  methods: {
    closeDialog() {
      this.show = true
      this.$refs.frightRef.resetFields()
      // this.$refs["frightRef"].resetFields(); 
      this.$emit('close-dialogStatus', true)
      this.$emit('isMode', 'update')
    },
    // 转化
    setNewData(data) {
      if (Array.isArray(data)) {
        data.forEach(item => {
          switch (item.templateType) {
            case 1:
              item.templateType = '同城寄'
              break
            case 2:
              item.templateType = '省内寄'
              break
            case 3:
              item.templateType = '经济区互寄'
              break
            default:
              item.templateType = '跨省'
              break
          }
          switch (item.transportType) {
            case 1:
              item.transportType = '普快'
              break
            default:
              item.transportType = '特快'
              break
          }
          item.associatedCityList.forEach((arr, i) => {
            switch (arr) {
              case '1':
                item.associatedCityList[i] = '全国'
                break
              case '2':
                item.associatedCityList[i] = '京津冀'
                break
              case '3':
                item.associatedCityList[i] = '江浙沪'
                break
              case '4':
                item.associatedCityList[i] = '川渝'
                break
              default:
                item.associatedCityList[i] = '黑吉辽'
                break
            }
          })
        })
      } else {
        switch (data.templateType) {
          case '同城寄':
            data.templateType = 1
            break
          case '省内寄':
            data.templateType = 2
            break
          case '经济区互寄':
            data.templateType = 3
            break
          case '跨省':
            data.templateType = 4
          // eslint-disable-next-line no-fallthrough
          default:
            break
        }
        switch (data.transportType) {
          case '普快':
            data.transportType = 1
            break
          default:
            // data.transportType = 2
            break
        }
        data.associatedCityList.forEach((arr, i) => {
          switch (arr) {
            case '全国':
              data.associatedCityList[i] = '1'
              break
            case '京津冀':
              data.associatedCityList[i] = '2'
              break
            case '江浙沪':
              data.associatedCityList[i] = '3'
              break
            case '川渝':
              data.associatedCityList[i] = '4'
              break
            default:
              data.associatedCityList[i] = '5'
              break
          }
        })
      }
      return data
    },
    async submit() {
      const obj = this.setNewData(this.rowData)
      await this.$refs.frightRef.validate(async (valid) => {
        if (valid) {
          // console.log(valid)
          const res = await freightManageOperate(obj)
          if (res.msg === 'ok') {
            this.rowData = {
              // 模板类型
              templateType: '',
              // 运送类型
              transportType: '',
              // 关联城市
              associatedCityList: [],
              // 首重价格
              firstWeight: '',
              // 续重价格
              continuousWeight: '',
              // 轻抛系数
              lightThrowingCoefficient: ''
            }
            this.$refs.frightRef.resetFields()
            // 手动清空
            // this.$refs.freightFrom.associatedCityList()
            this.$message.success('信息更新成功')
            this.$emit('queryList')
            this.closeDialog()
          } else {
            const objData = this.rowData
            switch (objData.templateType) {
              case 1:
                objData.templateType = '同城寄'
                break
              case 2:
                objData.templateType = '省内寄'
                break
              case 3:
                objData.templateType = '经济区互寄'
                break
              case 4:
                objData.templateType = '跨省'
              // eslint-disable-next-line no-fallthrough
              default:
                break
            }
            switch (objData.transportType) {
              case 1:
                objData.transportType = '普快'
                break
              case 2:
                objData.transportType = '特快'
                break
              default:
                break
            }
            console.log('obj', objData)
            this.rowData = objData
            this.$message.error(`${res.msg}`)
          }
        } else {
          // console.log(this.freightFrom)
          // console.log('rowData', this.rowData)
          return false
        }
      })
    },

    onCheckBox(value) {
      console.log(value)
    },

    // 经济区互寄状态
    onSelect(value) {
      this.rowData.associatedCityList.length = 0
      if (value === '3') {
        this.show = false
      } else {
        this.show = true
      }
    },
    onSelect1(value) {
      console.log(value)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-input {
  width: 460px;
}

::v-deep .el-input-group__append{
  background: #fff;
  color: #333333;
  border-left: none;
}

::v-deep label {
  font-weight: 400;
}
</style>
